<template>
  <div class="about">
    用户名: <input type="text" v-model="login.username" /> 密码:
    <input type="password" v-model="login.password" />
    <el-button size="small" @click="submit">登录</el-button>
    <div>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user";
// import { useStorage } from "@vueuse/core";
import { nextTick } from "vue";
// login 当作响应式对象使用 {username: ref('')， password: ref('')}
const login = useUserStore();
console.log(login);

const submit = () => {
  nextTick(() => {
    console.log(login.value.username, login.value.password);
  });
};
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
